<script lang="ts">
import CommissionTable from '~comp-b/referral/commission/CommissionTable.vue';

export const detailCampaignPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./CampaignDetails.vue')),
  {
    title: toRef(() => $t('ztjlCYaQbAb5epdnCd0oa')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
type CampaignInfo = Api.GetDataItem<typeof apis.apiInviteChannel>;
defineProps<{
  info: CampaignInfo;
}>();
</script>

<template>
  <div class="rounded-2 bg-sys-layer-c p-3">
    <ul class="list-none p-0 -my-2 *:my-2 *:flex-between">
      <li>
        <span>FTD's</span>
        <THelptip class="ml-1 text-sys-text-body">
          {{ $t('bcHcyXSG5oz5EjElvZ') }}
        </THelptip>
        <span class="ml-auto">{{ info.ftd_count }}</span>
      </li>
      <li>
        <span>{{ $t('ayNiNjVqFnaXjGxhxDlrC') }} FTD's</span>
        <TAmount :value="info.ftd_amount" symbol="$" iconPos="left" format="pad-dec" :decimals="6" />
      </li>
      <li>
        <span>{{ $t('lSs9ag4N5AqunERj9fFgu') }}</span>
        <span>{{ info.click_count }}</span>
      </li>
      <li>
        <span>{{ $t('fyN42TrNMrjOhnmh8SKnz') }}</span>
        <TAmount :value="info.bet_amount" symbol="$" iconPos="left" format="pad-dec" :decimals="6" />
      </li>
      <li>
        <span>{{ $t('0RLm2aEXx9e5EoW28Wjc5') }}</span>
        <span>{{ info.deposit_count }}</span>
      </li>
      <li>
        <span>{{ $t('roh14vjzF08Zzmryu8D5Q') }}</span>
        <TAmount :value="info.deposit_amount" symbol="$" iconPos="left" format="pad-dec" :decimals="6" />
      </li>
    </ul>
    <CommissionTable class="commission-table mt-5" :commions="info.commission_shares" />
  </div>
</template>
